<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>中国非物质文化遗产 - 项目结构可视化</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'Microsoft YaHei', sans-serif;
        line-height: 1.6;
        padding: 20px;
        background-color: #f5e1be;
        color: #3e2723;
      }

      h1 {
        text-align: center;
        margin: 20px 0;
        color: #b8860b;
        font-family: 'ZCOOL QingKe HuangYou', sans-serif;
      }

      h2 {
        margin: 30px 0 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #b8860b;
        color: #8b4513;
        font-family: 'ZCOOL QingKe HuangYou', sans-serif;
      }

      .page-container {
        max-width: 1200px;
        margin: 0 auto 50px;
        border: 2px solid #b8860b;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(139, 69, 19, 0.2);
        background-color: #fff8dc;
      }

      .header {
        background-color: #fff8dc;
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 5px;
        border-bottom: 2px solid #b8860b;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .logo {
        background-color: #f5e1be;
        padding: 10px;
        border-radius: 5px;
        width: 200px;
        text-align: center;
        color: #b8860b;
        font-weight: bold;
      }

      .navigation {
        background-color: #f5e1be;
        padding: 10px;
        border-radius: 5px;
        flex-grow: 1;
        margin-left: 20px;
        display: flex;
        justify-content: space-around;
      }

      .nav-item {
        background-color: #fff8dc;
        padding: 5px 10px;
        border-radius: 3px;
        border: 1px solid #b8860b;
      }

      .user-actions {
        background-color: #f5e1be;
        padding: 10px;
        border-radius: 5px;
        width: 150px;
        text-align: center;
        margin-left: 20px;
      }

      .main {
        background-color: #fff8dc;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 20px;
        min-height: 400px;
      }

      .footer {
        background-color: #5d4037;
        color: #fff8dc;
        padding: 15px;
        border-radius: 5px;
        text-align: center;
      }

      /* 首页特定样式 */
      .hero-section {
        background-color: #f5e1be;
        padding: 20px;
        border-radius: 5px;
        margin-bottom: 20px;
        text-align: center;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .featured-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        margin-bottom: 20px;
      }

      .featured-item {
        background-color: #f5e1be;
        padding: 10px;
        border-radius: 5px;
        text-align: center;
        height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .featured-image {
        background-color: #e0e0e0;
        height: 70px;
        margin-bottom: 10px;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .featured-info {
        background-color: #fff8dc;
        padding: 8px;
        border-radius: 3px;
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      /* 遗产详情页特定样式 */
      .heritage-detail {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }

      .heritage-images {
        background-color: #f5e1be;
        height: 300px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .heritage-info {
        background-color: #f5e1be;
        padding: 15px;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .social-interaction {
        background-color: #f5e1be;
        margin-top: 20px;
        padding: 15px;
        border-radius: 5px;
      }

      .interaction-buttons {
        display: flex;
        gap: 15px;
        margin-bottom: 15px;
      }

      .interaction-btn {
        background-color: #fff8dc;
        padding: 8px 15px;
        border-radius: 3px;
        text-align: center;
        border: 1px solid #b8860b;
      }

      .comments-section {
        background-color: #fff8dc;
        padding: 15px;
        border-radius: 5px;
      }

      /* 关于我们页面特定样式 */
      .about-section {
        margin-bottom: 20px;
      }

      .team-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
      }

      .team-member {
        background-color: #f5e1be;
        padding: 15px;
        border-radius: 5px;
        text-align: center;
      }

      .member-avatar {
        background-color: #e0e0e0;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 0 auto 10px;
      }

      .contact-form {
        background-color: #f5e1be;
        padding: 15px;
        border-radius: 5px;
        margin-top: 20px;
      }

      .form-group {
        margin-bottom: 15px;
      }

      .label-block {
        font-weight: bold;
        margin-bottom: 5px;
      }

      .notes {
        margin-top: 50px;
        padding: 15px;
        background-color: #f5e1be;
        border-radius: 5px;
        border-left: 5px solid #b8860b;
      }

      .color-legend {
        margin-top: 20px;
      }

      .legend-item {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
      }

      .color-box {
        width: 20px;
        height: 20px;
        border-radius: 3px;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h1>中国非物质文化遗产 - 项目结构可视化</h1>

    <div class="color-legend">
      <h3>颜色图例</h3>
      <div class="legend-item">
        <div class="color-box" style="background-color: #fff8dc"></div>
        <span>主要背景区域</span>
      </div>
      <div class="legend-item">
        <div class="color-box" style="background-color: #f5e1be"></div>
        <span>内容区块</span>
      </div>
      <div class="legend-item">
        <div class="color-box" style="background-color: #5d4037"></div>
        <span>页脚区域</span>
      </div>
      <div class="legend-item">
        <div class="color-box" style="background-color: #b8860b"></div>
        <span>强调色（边框、标题）</span>
      </div>
    </div>

    <h2>1. 首页结构 (HomeView.vue)</h2>
    <div class="page-container">
      <div class="header">
        <div class="logo">中国非物质文化遗产</div>
        <div class="navigation">
          <div class="nav-item">首页</div>
          <div class="nav-item">遗产名录</div>
          <div class="nav-item">特色遗产</div>
          <div class="nav-item">保护工作</div>
          <div class="nav-item">展示与传承</div>
          <div class="nav-item">关于我们</div>
        </div>
        <div class="user-actions">登录/注册</div>
      </div>

      <div class="main">
        <!-- 轮播图/Banner部分 -->
        <div class="hero-section">
          <div class="hero-slider">
            <div class="hero-content">
              <h1>传承中华文明 守护非物质文化遗产</h1>
              <p>非物质文化遗产是民族智慧的结晶，是历史文明的瑰宝</p>
            </div>
            <div class="hero-image">
              <img src="轮播图片" alt="非遗图片" />
              <div class="image-source">素材来源于中国非物质文化遗产网</div>
            </div>
          </div>
          <!-- 轮播图指示器 -->
          <div class="banner-indicators">
            <span class="indicator active"></span>
            <span class="indicator"></span>
            <span class="indicator"></span>
            <span class="indicator"></span>
          </div>
        </div>

        <!-- 非遗分类部分 -->
        <div class="category-section">
          <h2 class="section-title">非遗分类</h2>
          <div class="category-grid">
            <div class="category-card">
              <div class="category-image">
                <img src="景泰蓝图片" alt="传统技艺" />
                <div class="image-source">素材来源于中国非物质文化遗产网</div>
              </div>
              <h3>传统技艺</h3>
              <p>包括景泰蓝、苏绣、广绣、蜀锦等传统手工技艺、制作工艺</p>
              <a href="#" class="category-link">查看更多</a>
            </div>
            <div class="category-card">
              <div class="category-image">
                <img src="京剧图片" alt="传统戏剧" />
                <div class="image-source">素材来源于中国非物质文化遗产网</div>
              </div>
              <h3>传统戏剧</h3>
              <p>包括京剧、黄梅戏、昆曲、皮影戏等传统戏曲艺术</p>
              <a href="#" class="category-link">查看更多</a>
            </div>
            <div class="category-card">
              <div class="category-image">
                <img src="福建土楼图片" alt="民俗" />
                <div class="image-source">素材来源于维基百科</div>
              </div>
              <h3>民俗</h3>
              <p>包括福建土楼、傣族泼水节等传统建筑与节庆活动</p>
              <a href="#" class="category-link">查看更多</a>
            </div>
            <div class="category-card">
              <div class="category-image">
                <img src="藏医药浴图片" alt="传统医药" />
                <div class="image-source">素材来源于中国非物质文化遗产网</div>
              </div>
              <h3>传统医药</h3>
              <p>包括藏医药浴等传统医疗技艺与知识</p>
              <a href="#" class="category-link">查看更多</a>
            </div>
          </div>
        </div>

        <!-- 精选非遗项目部分 -->
        <div class="featured-section">
          <h2 class="section-title">精选非遗项目</h2>
          <div class="featured-grid">
            <div class="featured-card">
              <div class="featured-image">
                <img src="景泰蓝图片" alt="景泰蓝制作技艺" />
                <div class="image-source">素材来源于中国非物质文化遗产网</div>
              </div>
              <div class="featured-content">
                <h3>景泰蓝制作技艺</h3>
                <p class="featured-location">北京</p>
                <p class="featured-desc">
                  景泰蓝是中国传统的金属工艺品，以铜胎掐丝，填充色釉，经过烧制形成的工艺品，具有悠久的历史。
                </p>
                <a href="#" class="btn btn-primary">了解详情</a>
              </div>
            </div>
            <div class="featured-card">
              <div class="featured-image">
                <img src="苏州刺绣图片" alt="苏州刺绣" />
                <div class="image-source">素材来源于中国非物质文化遗产网</div>
              </div>
              <div class="featured-content">
                <h3>苏州刺绣</h3>
                <p class="featured-location">江苏苏州</p>
                <p class="featured-desc">
                  苏绣以其精细的针法、色彩典雅、图案秀丽闻名于世，被誉为"中国四大名绣"之一。
                </p>
                <a href="#" class="btn btn-primary">了解详情</a>
              </div>
            </div>
            <div class="featured-card">
              <div class="featured-image">
                <img src="京剧图片" alt="京剧" />
                <div class="image-source">素材来源于中国非物质文化遗产网</div>
              </div>
              <div class="featured-content">
                <h3>京剧</h3>
                <p class="featured-location">北京</p>
                <p class="featured-desc">
                  京剧是中国国粹，融合了唱、念、做、打等艺术表现形式，具有丰富的文化内涵和艺术魅力。
                </p>
                <a href="#" class="btn btn-primary">了解详情</a>
              </div>
            </div>
            <div class="featured-card">
              <div class="featured-image">
                <img src="黄梅戏图片" alt="黄梅戏" />
                <div class="image-source">素材来源于中国非物质文化遗产网</div>
              </div>
              <div class="featured-content">
                <h3>黄梅戏</h3>
                <p class="featured-location">安徽</p>
                <p class="featured-desc">
                  黄梅戏是中国五大戏曲剧种之一，以通俗易懂、贴近生活的表演风格深受观众喜爱。
                </p>
                <a href="#" class="btn btn-primary">了解详情</a>
              </div>
            </div>
          </div>
        </div>

        <!-- 最新活动部分 -->
        <div class="events-section">
          <h2 class="section-title">最新活动与展览</h2>
          <div class="events-grid">
            <div class="event-card">
              <div class="event-image">
                <img src="活动图片1" alt="2023中国非物质文化遗产博览会" />
                <div class="image-source">素材来源于中国非物质文化遗产网</div>
              </div>
              <div class="event-content">
                <div class="event-date">2023年6月10日-15日</div>
                <h3>2023中国非物质文化遗产博览会</h3>
                <p>本次博览会将展示来自全国各地的非遗项目，包括现场表演、工艺品展示和互动体验。</p>
                <div class="event-location">
                  <span class="icon">📍</span>
                  北京国家会议中心
                </div>
              </div>
            </div>
            <div class="event-card">
              <div class="event-image">
                <img src="活动图片2" alt="传统工艺振兴计划成果展" />
                <div class="image-source">素材来源于中国非物质文化遗产网</div>
              </div>
              <div class="event-content">
                <div class="event-date">2023年7月1日-30日</div>
                <h3>传统工艺振兴计划成果展</h3>
                <p>展示近年来传统工艺振兴计划的成果，包括多位工艺大师的代表作品。</p>
                <div class="event-location">
                  <span class="icon">📍</span>
                  上海工艺美术博物馆
                </div>
              </div>
            </div>
            <div class="event-card">
              <div class="event-image">
                <img src="活动图片3" alt="非遗进校园系列活动" />
                <div class="image-source">素材来源于中国非物质文化遗产网</div>
              </div>
              <div class="event-content">
                <div class="event-date">2023年9月-12月</div>
                <h3>非遗进校园系列活动</h3>
                <p>将非遗项目带入校园，让学生们近距离接触和了解中国传统文化。</p>
                <div class="event-location">
                  <span class="icon">📍</span>
                  全国多所学校
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 数据统计部分 -->
        <div class="stats-section">
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-number">1372</div>
              <div class="stat-title">国家级非遗项目</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">40</div>
              <div class="stat-title">入选联合国名录项目</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">3000+</div>
              <div class="stat-title">非遗传承人</div>
            </div>
            <div class="stat-item">
              <div class="stat-number">31</div>
              <div class="stat-title">涵盖省市自治区</div>
            </div>
          </div>
        </div>

        <!-- 订阅部分 -->
        <div class="subscribe-section">
          <div class="subscribe-content">
            <h2>订阅非遗资讯</h2>
            <p>获取最新的非物质文化遗产相关活动、政策和新闻</p>
            <form class="subscribe-form">
              <input type="email" placeholder="请输入您的邮箱" required />
              <button type="submit" class="btn btn-primary">订阅</button>
            </form>
          </div>
        </div>
      </div>

      <div class="footer">
        <div>版权信息 © 2025 软件1233叶正轩</div>
        <div>联系方式 | 关于我们 | 隐私政策</div>
      </div>
    </div>

    <div
      class="notes"
      style="margin-top: 20px; background-color: #f8f8f8; padding: 15px; border-radius: 5px"
    >
      <h3>首页内容与栏目分析</h3>
      <p style="margin-top: 10px; line-height: 1.6">
        首页作为网站的门户，包含六个主要内容区域：轮播图Banner区、非遗分类区、精选非遗项目区、最新活动与展览区、数据统计区和订阅区。轮播图Banner区展示四张精美图片，配有"传承中华文明
        守护非物质文化遗产"等主题文案，使用src/assets中的pic1-pic4图片，分别展示景泰蓝、苏州刺绣、京剧和黄梅戏等非遗主题内容。非遗分类区展示四大类非遗项目：传统技艺（景泰蓝、苏绣等）、传统戏剧（京剧、黄梅戏等）、民俗（福建土楼、傣族泼水节等）和传统医药（藏医药浴等），每个分类配有代表性图片和简介。
      </p>
      <p style="margin-top: 10px; line-height: 1.6">
        精选非遗项目区采用卡片式布局，展示四个代表性项目：景泰蓝制作技艺、苏州刺绣、京剧和黄梅戏，每个项目包含图片、名称、地区、简介和"了解详情"按钮。最新活动与展览区展示三个近期活动：2023中国非物质文化遗产博览会、传统工艺振兴计划成果展和非遗进校园系列活动，包含活动时间、地点和简介。数据统计区以醒目的数字展示非遗保护成果：1372项国家级非遗项目、40个入选联合国名录项目、3000+非遗传承人和31个涵盖省市自治区。订阅区提供邮箱订阅功能，方便用户获取最新非遗资讯。
      </p>
      <p style="margin-top: 10px; line-height: 1.6">
        交互方面，轮播图支持自动轮播和手动切换，分类卡片和项目卡片有鼠标悬停效果并可点击跳转到详情页，活动卡片点击可查看活动详情。订阅表单支持邮箱验证，提交后显示订阅成功提示。页面采用响应式设计，在不同设备上都有良好的显示效果。图片资源方面，大部分图片来源于中国非物质文化遗产网，部分图片来源于维基百科和其他公开资源，所有图片均标注来源信息。
      </p>
    </div>

    <h2>2. 特色遗产详情页结构 (JingTaiLanView.vue 等)</h2>
    <div class="page-container">
      <div class="header">
        <div class="logo">中国非物质文化遗产</div>
        <div class="navigation">
          <div class="nav-item">首页</div>
          <div class="nav-item">遗产名录</div>
          <div class="nav-item">特色遗产</div>
          <div class="nav-item">保护工作</div>
          <div class="nav-item">展示与传承</div>
          <div class="nav-item">关于我们</div>
        </div>
        <div class="user-actions">登录/注册</div>
      </div>

      <div class="main">
        <div class="heritage-detail">
          <div class="heritage-images">图片展示区域（可切换）</div>
          <div class="heritage-info">
            <div class="label-block">景泰蓝制作技艺</div>
            <div>项目类别：传统工艺</div>
            <div>级别：国家级非物质文化遗产</div>
            <div>地区：北京</div>
            <div>简介内容...</div>
          </div>
        </div>

        <div class="social-interaction">
          <div class="label-block">互动交流</div>
          <div class="interaction-buttons">
            <div class="interaction-btn">点赞 (158)</div>
            <div class="interaction-btn">分享 (42)</div>
          </div>

          <div class="comments-section">
            <div class="label-block">评论区 (3)</div>
            <div>评论输入框</div>
            <div>评论列表</div>
          </div>
        </div>
      </div>

      <div class="footer">
        <div>版权信息 © 2025 软件1233叶正轩</div>
        <div>联系方式 | 关于我们 | 隐私政策</div>
      </div>
    </div>

    <div
      class="notes"
      style="margin-top: 20px; background-color: #f8f8f8; padding: 15px; border-radius: 5px"
    >
      <h3>特色遗产详情页内容与栏目分析</h3>
      <p style="margin-top: 10px; line-height: 1.6">
        特色遗产详情页采用面包屑导航显示当前页面位置，页面主体分为左侧图片展示区和右侧信息展示区两部分。图片展示区支持多张图片切换查看，信息展示区包含遗产名称、类别、级别、地区和详细介绍等内容。页面底部设有互动交流区，包含点赞、分享按钮和评论区，支持用户互动。相关推荐区推荐同类别的其他非遗项目，增加用户浏览深度。
      </p>
      <p style="margin-top: 10px; line-height: 1.6">
        网站共有12个特色遗产详情页，分别使用src/assets中的pic1至pic12图片作为主要展示素材。其中景泰蓝制作技艺页面使用pic1，苏州刺绣页面使用pic2，京剧页面使用pic3，黄梅戏页面使用pic4，福建土楼页面使用pic5，广绣页面使用pic6，昆曲页面使用pic7，蜀锦页面使用pic8，贵州苗绣页面使用pic9，傣族泼水节页面使用pic10，藏医药浴页面使用pic11，皮影戏页面使用pic12。
      </p>
      <p style="margin-top: 10px; line-height: 1.6">
        交互功能方面，图片浏览支持切换和放大查看细节，登录用户可进行点赞、分享和评论操作，数据分别存储在likes表、shares表和comments表中。部分页面还提供相关视频资料，支持在线播放。数据交互上，页面加载时从后端API获取遗产详细信息，点赞数据从likes表获取，评论数据按时间倒序排列。未登录用户可查看内容但不能进行互动操作，系统会引导用户登录。
      </p>
    </div>

    <h2>3. 关于我们页面结构 (AboutView.vue)</h2>
    <div class="page-container">
      <div class="header">
        <div class="logo">中国非物质文化遗产</div>
        <div class="navigation">
          <div class="nav-item">首页</div>
          <div class="nav-item">遗产名录</div>
          <div class="nav-item">特色遗产</div>
          <div class="nav-item">保护工作</div>
          <div class="nav-item">展示与传承</div>
          <div class="nav-item">关于我们</div>
        </div>
        <div class="user-actions">登录/注册</div>
      </div>

      <div class="main">
        <div class="about-section">
          <div class="label-block">关于我们</div>
          <div>网站介绍内容...</div>
        </div>

        <div class="about-section">
          <div class="label-block">我们的使命</div>
          <div>使命描述内容...</div>
        </div>

        <div class="about-section">
          <div class="label-block">团队成员</div>
          <div class="team-grid">
            <div class="team-member">
              <div class="member-avatar"></div>
              <div>耶正萱</div>
              <div>创始人 / 非遗专家</div>
            </div>
            <div class="team-member">
              <div class="member-avatar"></div>
              <div>李静</div>
              <div>内容总监</div>
            </div>
            <div class="team-member">
              <div class="member-avatar"></div>
              <div>张明</div>
              <div>技术负责人</div>
            </div>
            <div class="team-member">
              <div class="member-avatar"></div>
              <div>刘佳</div>
              <div>传播总监</div>
            </div>
          </div>
        </div>

        <div class="about-section">
          <div class="label-block">联系我们</div>
          <div class="contact-form">
            <div class="form-group">
              <div>姓名输入框</div>
            </div>
            <div class="form-group">
              <div>邮箱输入框</div>
            </div>
            <div class="form-group">
              <div>留言内容输入框</div>
            </div>
            <div>提交按钮</div>
          </div>
        </div>

        <div class="social-interaction">
          <div class="label-block">互动交流</div>
          <div class="interaction-buttons">
            <div class="interaction-btn">点赞</div>
            <div class="interaction-btn">分享</div>
          </div>

          <div class="comments-section">
            <div class="label-block">评论区</div>
            <div>评论输入框</div>
            <div>评论列表</div>
          </div>
        </div>
      </div>

      <div class="footer">
        <div>版权信息 © 2025 软件1233叶正轩</div>
        <div>联系方式 | 关于我们 | 隐私政策</div>
      </div>
    </div>

    <div
      class="notes"
      style="margin-top: 20px; background-color: #f8f8f8; padding: 15px; border-radius: 5px"
    >
      <h3>关于我们页面内容与栏目分析</h3>
      <p style="margin-top: 10px; line-height: 1.6">
        "关于我们"页面分为网站介绍区、使命宣言区、团队成员区、联系表单区和互动交流区五个主要部分。网站介绍区介绍网站是一个致力于宣传和普及中国非物质文化遗产知识的平台，由软件1233叶正轩创建。使命宣言区强调保护和传承中国非物质文化遗产的重要性，以及网站在这一过程中的作用。团队成员区展示4位核心团队成员，包括创始人/非遗专家、内容总监、技术负责人和传播总监，采用卡片式布局和圆形头像设计。
      </p>
      <p style="margin-top: 10px; line-height: 1.6">
        联系表单区提供用户留言功能，包含姓名、邮箱和留言内容输入框，用户可填写信息与网站团队取得联系。页面还提供邮箱(2038286370@qq.com)和电话(+86-13640603902)等直接联系方式。互动交流区包含点赞、分享按钮和评论区，支持用户互动。数据交互方面，联系表单数据通过POST请求发送到后端API，点赞和评论数据分别存储在likes表和comments表中。未登录用户可查看内容但不能提交表单、点赞和评论，系统会引导用户登录。
      </p>
    </div>

    <h2>4. 保护工作页面结构 (ProtectionView.vue)</h2>
    <div class="page-container">
      <div class="header">
        <div class="logo">中国非物质文化遗产</div>
        <div class="navigation">
          <div class="nav-item">首页</div>
          <div class="nav-item">遗产名录</div>
          <div class="nav-item">特色遗产</div>
          <div class="nav-item">保护工作</div>
          <div class="nav-item">展示与传承</div>
          <div class="nav-item">关于我们</div>
        </div>
        <div class="user-actions">登录/注册</div>
      </div>

      <div class="main">
        <!-- 页面标题区 -->
        <div class="page-header">
          <h1>非物质文化遗产保护工作</h1>
          <p>保护非物质文化遗产是保存人类文明多样性的重要举措，是传承中华优秀传统文化的必然要求</p>
        </div>

        <!-- 法律法规保护区 -->
        <div class="protection-section">
          <h2 class="section-title">法律法规保护</h2>
          <div class="protection-content">
            <div class="protection-image">
              <img src="法律法规图片" alt="法律法规保护" />
              <div class="image-source">素材来源于中国非物质文化遗产网</div>
            </div>
            <div class="protection-text">
              <h3>《中华人民共和国非物质文化遗产法》</h3>
              <p class="law-date">2011年6月1日起施行</p>
              <p>
                《中华人民共和国非物质文化遗产法》是我国首部专门针对非物质文化遗产保护的法律，为非遗保护提供了法律保障。该法明确了非遗的定义、范围，规定了保护措施和管理体制，确立了调查、认定、传承、传播等保护制度。
              </p>
              <div class="law-highlights">
                <div class="highlight-item">
                  <h4>第一条</h4>
                  <p>
                    为了继承和弘扬中华民族优秀传统文化，促进社会主义精神文明建设，加强非物质文化遗产保护、保存工作，制定本法。
                  </p>
                </div>
                <div class="highlight-item">
                  <h4>第二条</h4>
                  <p>
                    本法所称非物质文化遗产，是指各族人民世代相传并视为其文化遗产组成部分的各种传统文化表现形式和与传统文化表现形式相关的实物、场所。
                  </p>
                </div>
              </div>
              <a href="#" class="btn btn-secondary">查看完整法律文本</a>
            </div>
          </div>
        </div>

        <!-- 名录体系建设区 -->
        <div class="protection-section">
          <h2 class="section-title">名录体系建设</h2>
          <div class="protection-content">
            <div class="protection-text">
              <h3>国家级非物质文化遗产代表性项目名录</h3>
              <p>
                我国建立了国家、省、市、县四级非物质文化遗产名录体系，形成了较为完善的非遗保护网络。截至目前，国务院已公布五批共1372项国家级非物质文化遗产代表性项目，各省、自治区、直辖市公布的省级名录项目近万项。
              </p>
              <div class="batch-info">
                <div class="batch-item">
                  <h4>第一批（2006年）</h4>
                  <p>共518项，涵盖民间文学、传统音乐、传统舞蹈等十大类</p>
                </div>
                <div class="batch-item">
                  <h4>第二批（2008年）</h4>
                  <p>共510项，进一步扩大了非遗保护范围</p>
                </div>
                <div class="batch-item">
                  <h4>第三批（2011年）</h4>
                  <p>共191项，重点关注濒危非遗项目</p>
                </div>
                <div class="batch-item">
                  <h4>第四批（2014年）</h4>
                  <p>共153项，加强了少数民族非遗项目的保护</p>
                </div>
              </div>
              <p>
                此外，我国已有40个项目入选联合国教科文组织非物质文化遗产名录，数量位居世界第一。
              </p>
            </div>
            <div class="protection-image">
              <img src="名录体系图片" alt="名录体系建设" />
              <div class="image-source">素材来源于中国非物质文化遗产网</div>
            </div>
          </div>
        </div>

        <!-- 传承人制度区 -->
        <div class="protection-section">
          <h2 class="section-title">传承人制度</h2>
          <div class="protection-content">
            <div class="protection-image">
              <img src="传承人图片" alt="传承人制度" />
              <div class="image-source">素材来源于中国非物质文化遗产网</div>
            </div>
            <div class="protection-text">
              <h3>国家级非物质文化遗产代表性传承人认定与保护</h3>
              <p>
                传承人是非物质文化遗产的重要载体，是非遗保护工作的核心。我国建立了国家级非物质文化遗产代表性传承人认定与保护制度，对传承人进行认定、资助和管理。
              </p>
              <div class="inheritor-stats">
                <div class="stat-item">
                  <div class="stat-number">5</div>
                  <div class="stat-title">批次</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number">3068</div>
                  <div class="stat-title">传承人总数</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number">2万元</div>
                  <div class="stat-title">年度补助</div>
                </div>
              </div>
              <p>
                国家级非遗代表性传承人享受每年2万元的补助资金，用于开展传习活动、培养后继人才、整理资料等。同时，各地也建立了省、市、县三级传承人认定制度，形成了多层次的传承人保护体系。
              </p>
              <a href="#" class="btn btn-secondary">查看传承人名单</a>
            </div>
          </div>
        </div>

        <!-- 传承基地建设区 -->
        <div class="protection-section">
          <h2 class="section-title">传承基地建设</h2>
          <div class="protection-content">
            <div class="protection-text">
              <h3>非物质文化遗产传承基地</h3>
              <p>
                传承基地是非物质文化遗产保护的重要载体，是传承人才培养和技艺传承的重要平台。我国建立了国家级、省级非物质文化遗产生产性保护示范基地认定制度，支持传统工艺的活态传承。
              </p>
              <div class="base-types">
                <div class="base-type">
                  <h4>生产性保护示范基地</h4>
                  <p>以传统工艺为主，通过生产实践保护和传承非遗项目</p>
                </div>
                <div class="base-type">
                  <h4>传习所/传习基地</h4>
                  <p>以教学传习为主，培养非遗传承人才</p>
                </div>
                <div class="base-type">
                  <h4>研究基地</h4>
                  <p>以学术研究为主，深入挖掘非遗的文化内涵和价值</p>
                </div>
              </div>
              <p>
                截至目前，文化和旅游部已认定21家国家级非物质文化遗产生产性保护示范基地，各地也建立了数百家省级传承基地。
              </p>
            </div>
            <div class="protection-image">
              <img src="传承基地图片" alt="传承基地建设" />
              <div class="image-source">素材来源于中国非物质文化遗产网</div>
            </div>
          </div>
        </div>

        <!-- 保护专项资金区 -->
        <div class="protection-section">
          <h2 class="section-title">保护专项资金</h2>
          <div class="fund-stats">
            <div class="fund-item">
              <div class="fund-icon">💰</div>
              <div class="fund-number">12.5亿元</div>
              <div class="fund-title">年度中央财政专项资金</div>
            </div>
            <div class="fund-item">
              <div class="fund-icon">📊</div>
              <div class="fund-number">50亿元+</div>
              <div class="fund-title">累计投入资金</div>
            </div>
            <div class="fund-item">
              <div class="fund-icon">🏆</div>
              <div class="fund-number">1557项</div>
              <div class="fund-title">已资助项目数量</div>
            </div>
          </div>
          <div class="fund-usage">
            <h3>资金使用方向</h3>
            <div class="usage-grid">
              <div class="usage-item">
                <div class="usage-icon">🔍</div>
                <div class="usage-title">普查与记录</div>
                <p>支持非遗资源调查、记录与数据库建设</p>
              </div>
              <div class="usage-item">
                <div class="usage-icon">👨‍🏫</div>
                <div class="usage-title">传承人培养</div>
                <p>资助传承人开展传习活动和培养后继人才</p>
              </div>
              <div class="usage-item">
                <div class="usage-icon">🏛️</div>
                <div class="usage-title">基地建设</div>
                <p>支持传承基地和生产性保护示范基地建设</p>
              </div>
              <div class="usage-item">
                <div class="usage-icon">📚</div>
                <div class="usage-title">研究与出版</div>
                <p>资助非遗研究和相关资料的整理出版</p>
              </div>
            </div>
          </div>
        </div>

        <!-- "非遗进校园"行动区 -->
        <div class="protection-section">
          <h2 class="section-title">"非遗进校园"行动</h2>
          <div class="protection-content">
            <div class="protection-image">
              <img src="非遗进校园图片" alt="非遗进校园" />
              <div class="image-source">素材来源于中国非物质文化遗产网</div>
            </div>
            <div class="protection-text">
              <h3>让非遗走进青少年的生活</h3>
              <p>
                "非遗进校园"是文化和旅游部、教育部联合开展的重要文化教育活动，旨在将非物质文化遗产保护传承纳入国民教育体系，培养青少年对中华优秀传统文化的认同感和自豪感。
              </p>
              <div class="campus-activities">
                <div class="activity-item">
                  <h4>非遗课程开发</h4>
                  <p>开发非遗校本课程，将非遗知识融入学校教育</p>
                </div>
                <div class="activity-item">
                  <h4>传承人进校园</h4>
                  <p>邀请非遗传承人走进校园，开展现场教学和互动体验</p>
                </div>
                <div class="activity-item">
                  <h4>非遗社团建设</h4>
                  <p>在学校建立非遗社团，开展常态化非遗学习活动</p>
                </div>
                <div class="activity-item">
                  <h4>研学实践活动</h4>
                  <p>组织学生参观非遗传承基地，开展实地研学活动</p>
                </div>
              </div>
              <p>截至目前，全国已有超过5000所学校开展了"非遗进校园"活动，覆盖学生超过500万人次。</p>
            </div>
          </div>
        </div>

        <!-- 共同参与非遗保护区 -->
        <div class="join-protection">
          <div class="join-content">
            <h2>共同参与非遗保护</h2>
            <p>非物质文化遗产保护需要全社会共同参与。您可以通过以下方式支持非遗保护工作：</p>
            <div class="join-ways">
              <div class="join-way">
                <div class="way-icon">👀</div>
                <div class="way-title">了解非遗</div>
                <p>关注非遗资讯，了解非遗知识，提高保护意识</p>
              </div>
              <div class="join-way">
                <div class="way-icon">🛒</div>
                <div class="way-title">购买非遗产品</div>
                <p>购买非遗传统工艺产品，支持非遗生产性保护</p>
              </div>
              <div class="join-way">
                <div class="way-icon">🎭</div>
                <div class="way-title">参与非遗活动</div>
                <p>参加非遗展演、体验活动，感受非遗魅力</p>
              </div>
              <div class="join-way">
                <div class="way-icon">📝</div>
                <div class="way-title">记录与传播</div>
                <p>记录和分享非遗知识，扩大非遗影响力</p>
              </div>
            </div>
            <a href="#" class="btn btn-primary">立即参与</a>
          </div>
        </div>
      </div>

      <div class="footer">
        <div>版权信息 © 2025 软件1233叶正轩</div>
        <div>联系方式 | 关于我们 | 隐私政策</div>
      </div>
    </div>

    <div
      class="notes"
      style="margin-top: 20px; background-color: #f8f8f8; padding: 15px; border-radius: 5px"
    >
      <h3>保护工作页面内容与栏目分析</h3>
      <p style="margin-top: 10px; line-height: 1.6">
        保护工作页面采用全新的结构设计，包含八个主要内容区域：页面标题区、法律法规保护区、名录体系建设区、传承人制度区、传承基地建设区、保护专项资金区、"非遗进校园"行动区和共同参与非遗保护区。页面标题区以"非物质文化遗产保护工作"为主标题，配有"保护非物质文化遗产是保存人类文明多样性的重要举措，是传承中华优秀传统文化的必然要求"的副标题。法律法规保护区详细介绍了2011年6月1日起施行的《中华人民共和国非物质文化遗产法》，包括法律条文摘录和完整法律文本链接。
      </p>
      <p style="margin-top: 10px; line-height: 1.6">
        名录体系建设区介绍了我国四级非遗名录体系，详细列出了国家级非遗名录五批公布情况：第一批(2006年)518项、第二批(2008年)510项、第三批(2011年)191项、第四批(2014年)153项，以及40个入选联合国教科文组织名录的项目。传承人制度区介绍了国家级非遗代表性传承人认定与保护制度，包括5批次共3068名传承人和每年2万元的补助政策。传承基地建设区介绍了三类非遗传承基地：生产性保护示范基地、传习所/传习基地和研究基地，以及21家国家级示范基地的认定情况。
      </p>
      <p style="margin-top: 10px; line-height: 1.6">
        保护专项资金区以醒目的数字展示了非遗保护资金投入：年度中央财政专项资金12.5亿元、累计投入资金50亿元以上、已资助项目1557项，并介绍了资金的四大使用方向：普查与记录、传承人培养、基地建设和研究与出版。"非遗进校园"行动区介绍了文化和旅游部、教育部联合开展的文化教育活动，包括非遗课程开发、传承人进校园、非遗社团建设和研学实践活动四个方面，覆盖全国5000多所学校、500万学生。共同参与非遗保护区介绍了公众参与非遗保护的四种方式：了解非遗、购买非遗产品、参与非遗活动和记录与传播，并设有"立即参与"按钮引导用户行动。
      </p>
    </div>

    <h2>5. 登录页面结构 (LoginView.vue)</h2>
    <div class="page-container">
      <div class="header">
        <div class="logo">中国非物质文化遗产</div>
        <div class="navigation">
          <div class="nav-item">首页</div>
          <div class="nav-item">遗产名录</div>
          <div class="nav-item">特色遗产</div>
          <div class="nav-item">保护工作</div>
          <div class="nav-item">展示与传承</div>
          <div class="nav-item">关于我们</div>
        </div>
        <div class="user-actions">登录/注册</div>
      </div>

      <div class="main">
        <div
          style="
            max-width: 500px;
            margin: 0 auto;
            background-color: #f5e1be;
            padding: 20px;
            border-radius: 5px;
          "
        >
          <div class="label-block" style="text-align: center; font-size: 1.5rem">用户登录</div>

          <div style="margin: 20px 0">
            <div class="label-block">用户名</div>
            <div
              style="
                background-color: #fff8dc;
                height: 40px;
                border-radius: 3px;
                border: 1px solid #b8860b;
              "
            ></div>
          </div>

          <div style="margin: 20px 0">
            <div class="label-block">密码</div>
            <div
              style="
                background-color: #fff8dc;
                height: 40px;
                border-radius: 3px;
                border: 1px solid #b8860b;
              "
            ></div>
          </div>

          <div style="margin: 20px 0">
            <div class="label-block">验证码</div>
            <div style="display: flex; gap: 10px">
              <div
                style="
                  background-color: #fff8dc;
                  height: 40px;
                  border-radius: 3px;
                  border: 1px solid #b8860b;
                  flex: 1;
                "
              ></div>
              <div
                style="
                  background-color: #e0e0e0;
                  height: 40px;
                  width: 100px;
                  border-radius: 3px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                验证码图片
              </div>
            </div>
          </div>

          <div style="margin: 30px 0; text-align: center">
            <div
              style="
                background-color: #b8860b;
                color: white;
                height: 40px;
                border-radius: 3px;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              登录
            </div>
          </div>

          <div style="text-align: center">
            <div>还没有账号？<span style="color: #b8860b">立即注册</span></div>
          </div>
        </div>
      </div>

      <div class="footer">
        <div>版权信息 © 2025 软件1233叶正轩</div>
        <div>联系方式 | 关于我们 | 隐私政策</div>
      </div>
    </div>

    <div
      class="notes"
      style="margin-top: 20px; background-color: #f8f8f8; padding: 15px; border-radius: 5px"
    >
      <h3>登录页面内容与栏目分析</h3>
      <p style="margin-top: 10px; line-height: 1.6">
        登录页面设计简洁明了，主要分为页面标题区、登录表单区、验证码区、登录按钮区和注册引导区五个部分。页面标题区居中显示"用户登录"标题，登录表单区包含用户名和密码输入框，均设置了必填验证。验证码区包含验证码输入框和验证码图片，点击图片可刷新获取新的验证码。登录按钮区设计醒目，点击后向后端API发送登录请求。注册引导区提示未注册用户前往注册页面，增强用户体验。
      </p>
      <p style="margin-top: 10px; line-height: 1.6">
        交互功能方面，表单设有前端验证，包括必填项检查和格式验证；登录请求向/api/user/login接口发送POST请求，包含用户名、密码和验证码；登录失败时显示相应错误信息；登录成功后自动跳转到之前浏览的页面或首页。安全性方面，密码在前端进行MD5加密后再发送到后端；使用验证码机制防止暴力破解和机器人攻击；登录成功后获取JWT
        token用于身份验证；采用HTTPS协议确保数据传输安全；设置token过期时间，超时后需要重新登录。登录成功后，用户信息和token存储在localStorage中，使用Pinia的userStore管理用户登录状态。
      </p>
    </div>

    <h2>6. 展示与传承页面结构 (ExhibitionView.vue)</h2>
    <div class="page-container">
      <div class="header">
        <div class="logo">中国非物质文化遗产</div>
        <div class="navigation">
          <div class="nav-item">首页</div>
          <div class="nav-item">遗产名录</div>
          <div class="nav-item">特色遗产</div>
          <div class="nav-item">保护工作</div>
          <div class="nav-item">展示与传承</div>
          <div class="nav-item">关于我们</div>
        </div>
        <div class="user-actions">登录/注册</div>
      </div>

      <div class="main">
        <div class="about-section">
          <div class="label-block">精品展览推荐</div>
          <div class="featured-grid">
            <div class="featured-item">
              <div class="featured-image">中国传统工艺精品展</div>
              <div class="featured-info">展览信息</div>
            </div>
            <div class="featured-item">
              <div class="featured-image">非遗音乐会</div>
              <div class="featured-info">展览信息</div>
            </div>
            <div class="featured-item">
              <div class="featured-image">文化遗产节</div>
              <div class="featured-info">展览信息</div>
            </div>
          </div>
        </div>

        <div class="about-section">
          <div class="label-block">非遗体验活动</div>
          <div>活动列表...</div>
        </div>

        <div class="about-section">
          <div class="label-block">数字化展示平台</div>
          <div>数字化展示内容...</div>
        </div>
      </div>

      <div class="footer">
        <div>版权信息 © 2025 软件1233叶正轩</div>
        <div>联系方式 | 关于我们 | 隐私政策</div>
      </div>
    </div>

    <div
      class="notes"
      style="margin-top: 20px; background-color: #f8f8f8; padding: 15px; border-radius: 5px"
    >
      <h3>展示与传承页面内容与栏目分析</h3>
      <p style="margin-top: 10px; line-height: 1.6">
        展示与传承页面主要分为页面标题区、精品展览推荐区、非遗体验活动区、数字化展示平台区、传承教育区和展览日历区六个主要部分。精品展览推荐区采用网格布局，展示三个精品展览：中国传统工艺精品展(使用pic1景泰蓝图片，来源于中国工艺美术馆)、非遗音乐会(使用pic2苏州刺绣图片，来源于中国非物质文化遗产网)和中国非物质文化遗产节(使用pic3京剧图片，来源于成都非物质文化遗产节)。非遗体验活动区展示可参与的体验活动，包括工艺品制作体验、传统表演艺术体验和传统技艺学习班等。
      </p>
      <p style="margin-top: 10px; line-height: 1.6">
        数字化展示平台区使用pic4(黄梅戏)作为展示图片，介绍非遗数字化保护和展示平台。传承教育区介绍面向青少年的非遗传承教育项目。展览日历区按时间顺序展示近期全国各地的非遗展览活动。交互功能方面，展览卡片有鼠标悬停效果，点击可查看展览详情；活动卡片上设有"报名参加"按钮，点击可进入报名流程；日历区可按地区、类型筛选展览活动；数字展示平台区提供链接进入虚拟展览。数据交互方面，展览信息从后端API获取，活动报名信息通过POST请求发送到后端API，活动报名功能需要用户登录才能使用。视觉设计上，展览卡片使用大图片展示，活动列表采用时间轴形式，日历视图直观展示展览时间安排，整体页面采用响应式设计。
      </p>
    </div>

    <h2>7. 遗产名录页面结构 (HeritageListView.vue)</h2>
    <div class="page-container">
      <div class="header">
        <div class="logo">中国非物质文化遗产</div>
        <div class="navigation">
          <div class="nav-item">首页</div>
          <div class="nav-item">遗产名录</div>
          <div class="nav-item">特色遗产</div>
          <div class="nav-item">保护工作</div>
          <div class="nav-item">展示与传承</div>
          <div class="nav-item">关于我们</div>
        </div>
        <div class="user-actions">登录/注册</div>
      </div>

      <div class="main">
        <div class="page-header">
          <h1>中国非物质文化遗产名录</h1>
          <p>
            截至2023年，我国共有1372个国家级非物质文化遗产代表性项目，40个项目入选联合国教科文组织非物质文化遗产名录
          </p>
        </div>

        <div class="filter-section">
          <div class="search-box">
            <input type="text" placeholder="搜索非遗项目名称..." />
            <button class="search-btn">搜索</button>
          </div>

          <div class="filter-options">
            <div class="filter-group">
              <label>类别</label>
              <select>
                <option value="">全部类别</option>
                <option value="1">传统技艺</option>
                <option value="2">传统音乐</option>
                <option value="3">传统舞蹈</option>
                <option value="4">传统戏剧</option>
                <option value="5">曲艺</option>
                <option value="6">传统体育</option>
                <option value="7">传统医药</option>
                <option value="8">民俗</option>
              </select>
            </div>

            <div class="filter-group">
              <label>地区</label>
              <select>
                <option value="">全部地区</option>
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">江苏</option>
                <option value="4">浙江</option>
                <option value="5">安徽</option>
                <!-- 更多地区选项 -->
              </select>
            </div>

            <div class="filter-group">
              <label>级别</label>
              <select>
                <option value="">全部级别</option>
                <option value="national">国家级</option>
                <option value="provincial">省级</option>
                <option value="unesco">联合国教科文组织名录</option>
              </select>
            </div>

            <button class="filter-btn">筛选</button>
            <button class="reset-btn">重置</button>
          </div>
        </div>

        <div class="heritage-grid">
          <div class="heritage-card">
            <div class="heritage-image">
              <img src="景泰蓝制作技艺图片" alt="景泰蓝制作技艺" />
            </div>
            <div class="heritage-content">
              <h3>景泰蓝制作技艺</h3>
              <div class="heritage-meta">
                <span class="heritage-location">北京</span>
                <span class="heritage-level">国家级</span>
              </div>
              <p class="heritage-desc">
                景泰蓝是中国传统金属工艺的代表，以铜胎掐丝珐琅彩为主要特征...
              </p>
            </div>
          </div>

          <!-- 更多遗产卡片 -->
        </div>

        <div class="pagination">
          <span class="page-btn">上一页</span>
          <span class="page-number active">1</span>
          <span class="page-number">2</span>
          <span class="page-number">3</span>
          <span class="page-btn">下一页</span>
        </div>
      </div>

      <div class="footer">
        <div>版权信息 © 2025 软件1233叶正轩</div>
        <div>联系方式 | 关于我们 | 隐私政策</div>
      </div>
    </div>

    <div
      class="notes"
      style="margin-top: 20px; background-color: #f8f8f8; padding: 15px; border-radius: 5px"
    >
      <h3>遗产名录页面内容与栏目分析</h3>
      <p style="margin-top: 10px; line-height: 1.6">
        遗产名录页面主要分为页面标题区、搜索筛选区、遗产列表区和分页导航区四个主要部分。页面标题区展示"中国非物质文化遗产名录"标题和统计数据，包括国家级非遗项目总数(1372项)和入选联合国教科文组织名录项目数(40项)。搜索筛选区提供搜索框和多种筛选条件，包括类别筛选(传统技艺、传统音乐、传统舞蹈等8个类别)、地区筛选(全国31个省级行政区)和级别筛选(国家级、省级和联合国教科文组织名录)，方便用户快速查找特定非遗项目。
      </p>
      <p style="margin-top: 10px; line-height: 1.6">
        遗产列表区采用卡片式布局，以网格形式展示非遗项目，每个项目卡片包含项目名称、项目图片、所属地区、保护级别和项目简介等信息。项目图片使用pic1-pic12等图片资源，如景泰蓝制作技艺使用pic1，苏州刺绣使用pic2等。分页导航区提供分页功能，每页显示12个项目，包含页码导航和上一页/下一页按钮，方便用户浏览大量非遗项目。交互功能方面，支持按项目名称关键词搜索，支持多条件组合筛选，提供一键重置筛选条件功能，项目卡片有鼠标悬停效果并可点击跳转到详情页。数据交互上，从后端API获取非遗项目列表，支持分页和筛选，搜索和筛选条件通过API请求获取匹配的项目数据。
      </p>
    </div>

    <h2>8. 数据库结构</h2>
    <div class="page-container">
      <div style="margin-bottom: 30px">
        <div class="label-block" style="font-size: 1.3rem; margin-bottom: 15px">用户表 (users)</div>
        <table
          style="
            width: 100%;
            border-collapse: collapse;
            background-color: #fff8dc;
            border: 1px solid #b8860b;
          "
        >
          <thead>
            <tr style="background-color: #b8860b; color: white">
              <th style="padding: 10px; text-align: left; border: 1px solid #b8860b">字段名</th>
              <th style="padding: 10px; text-align: left; border: 1px solid #b8860b">类型</th>
              <th style="padding: 10px; text-align: left; border: 1px solid #b8860b">说明</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">id</td>
              <td style="padding: 10px; border: 1px solid #b8860b">INT</td>
              <td style="padding: 10px; border: 1px solid #b8860b">主键，自增</td>
            </tr>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">username</td>
              <td style="padding: 10px; border: 1px solid #b8860b">VARCHAR(100)</td>
              <td style="padding: 10px; border: 1px solid #b8860b">用户名，唯一</td>
            </tr>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">password</td>
              <td style="padding: 10px; border: 1px solid #b8860b">VARCHAR(255)</td>
              <td style="padding: 10px; border: 1px solid #b8860b">密码（加密存储）</td>
            </tr>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">email</td>
              <td style="padding: 10px; border: 1px solid #b8860b">VARCHAR(100)</td>
              <td style="padding: 10px; border: 1px solid #b8860b">邮箱</td>
            </tr>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">created_at</td>
              <td style="padding: 10px; border: 1px solid #b8860b">TIMESTAMP</td>
              <td style="padding: 10px; border: 1px solid #b8860b">创建时间</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div style="margin-bottom: 30px">
        <div class="label-block" style="font-size: 1.3rem; margin-bottom: 15px">
          评论表 (comments)
        </div>
        <table
          style="
            width: 100%;
            border-collapse: collapse;
            background-color: #fff8dc;
            border: 1px solid #b8860b;
          "
        >
          <thead>
            <tr style="background-color: #b8860b; color: white">
              <th style="padding: 10px; text-align: left; border: 1px solid #b8860b">字段名</th>
              <th style="padding: 10px; text-align: left; border: 1px solid #b8860b">类型</th>
              <th style="padding: 10px; text-align: left; border: 1px solid #b8860b">说明</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">id</td>
              <td style="padding: 10px; border: 1px solid #b8860b">INT</td>
              <td style="padding: 10px; border: 1px solid #b8860b">主键，自增</td>
            </tr>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">user_id</td>
              <td style="padding: 10px; border: 1px solid #b8860b">INT</td>
              <td style="padding: 10px; border: 1px solid #b8860b">用户ID，外键</td>
            </tr>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">page_id</td>
              <td style="padding: 10px; border: 1px solid #b8860b">VARCHAR(50)</td>
              <td style="padding: 10px; border: 1px solid #b8860b">页面ID</td>
            </tr>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">content</td>
              <td style="padding: 10px; border: 1px solid #b8860b">TEXT</td>
              <td style="padding: 10px; border: 1px solid #b8860b">评论内容</td>
            </tr>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">created_at</td>
              <td style="padding: 10px; border: 1px solid #b8860b">TIMESTAMP</td>
              <td style="padding: 10px; border: 1px solid #b8860b">创建时间</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div style="margin-bottom: 30px">
        <div class="label-block" style="font-size: 1.3rem; margin-bottom: 15px">点赞表 (likes)</div>
        <table
          style="
            width: 100%;
            border-collapse: collapse;
            background-color: #fff8dc;
            border: 1px solid #b8860b;
          "
        >
          <thead>
            <tr style="background-color: #b8860b; color: white">
              <th style="padding: 10px; text-align: left; border: 1px solid #b8860b">字段名</th>
              <th style="padding: 10px; text-align: left; border: 1px solid #b8860b">类型</th>
              <th style="padding: 10px; text-align: left; border: 1px solid #b8860b">说明</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">id</td>
              <td style="padding: 10px; border: 1px solid #b8860b">INT</td>
              <td style="padding: 10px; border: 1px solid #b8860b">主键，自增</td>
            </tr>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">user_id</td>
              <td style="padding: 10px; border: 1px solid #b8860b">INT</td>
              <td style="padding: 10px; border: 1px solid #b8860b">用户ID，外键</td>
            </tr>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">page_id</td>
              <td style="padding: 10px; border: 1px solid #b8860b">VARCHAR(50)</td>
              <td style="padding: 10px; border: 1px solid #b8860b">页面ID</td>
            </tr>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">created_at</td>
              <td style="padding: 10px; border: 1px solid #b8860b">TIMESTAMP</td>
              <td style="padding: 10px; border: 1px solid #b8860b">创建时间</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div style="margin-bottom: 30px">
        <div class="label-block" style="font-size: 1.3rem; margin-bottom: 15px">
          分享表 (shares)
        </div>
        <table
          style="
            width: 100%;
            border-collapse: collapse;
            background-color: #fff8dc;
            border: 1px solid #b8860b;
          "
        >
          <thead>
            <tr style="background-color: #b8860b; color: white">
              <th style="padding: 10px; text-align: left; border: 1px solid #b8860b">字段名</th>
              <th style="padding: 10px; text-align: left; border: 1px solid #b8860b">类型</th>
              <th style="padding: 10px; text-align: left; border: 1px solid #b8860b">说明</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">id</td>
              <td style="padding: 10px; border: 1px solid #b8860b">INT</td>
              <td style="padding: 10px; border: 1px solid #b8860b">主键，自增</td>
            </tr>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">user_id</td>
              <td style="padding: 10px; border: 1px solid #b8860b">INT</td>
              <td style="padding: 10px; border: 1px solid #b8860b">用户ID，外键</td>
            </tr>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">page_id</td>
              <td style="padding: 10px; border: 1px solid #b8860b">VARCHAR(50)</td>
              <td style="padding: 10px; border: 1px solid #b8860b">页面ID</td>
            </tr>
            <tr>
              <td style="padding: 10px; border: 1px solid #b8860b">created_at</td>
              <td style="padding: 10px; border: 1px solid #b8860b">TIMESTAMP</td>
              <td style="padding: 10px; border: 1px solid #b8860b">创建时间</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div
      class="notes"
      style="margin-top: 30px; background-color: #f8f8f8; padding: 15px; border-radius: 5px"
    >
      <h3>数据库结构分析</h3>
      <p style="margin-top: 10px; line-height: 1.6">
        数据库设计采用关系型数据库MySQL，主要包含四个表：用户表(users)、评论表(comments)、点赞表(likes)和分享表(shares)。用户表存储用户账号信息，支持用户注册、登录和个人信息管理，核心字段包括id(主键)、username(用户名)、password(密码，使用MD5加密存储)、email(邮箱)和created_at(创建时间)。评论表存储用户对各页面的评论内容，核心字段包括id(主键)、user_id(用户ID)、page_id(页面ID)、content(评论内容)和created_at(创建时间)，通过user_id关联到用户表，通过page_id标识评论所属页面。
      </p>
      <p style="margin-top: 10px; line-height: 1.6">
        点赞表记录用户对页面的点赞行为，核心字段包括id(主键)、user_id(用户ID)、page_id(页面ID)和created_at(创建时间)，同一用户对同一页面只能点赞一次，通过user_id和page_id的唯一索引实现，点赞数通过统计likes表中相同page_id的记录数获得。分享表记录用户分享页面的行为，核心字段与点赞表类似，但用户可以多次分享同一页面，每次分享都会记录。数据交互流程包括用户注册流程(前端表单验证→后端验证用户名唯一性→密码加密→写入users表→返回注册结果)、用户登录流程(前端表单验证→后端验证→生成JWT
        token→返回登录结果)、评论发布流程、点赞操作流程和分享操作流程，所有互动功能都需要验证用户登录状态，未登录用户只能浏览内容。
      </p>
    </div>

    <div class="notes">
      <h3>项目结构说明：</h3>
      <p>1. <strong>前端框架</strong>：使用 Vue.js 3 + Vite 构建，采用 Composition API。</p>
      <p>
        2. <strong>状态管理</strong>：使用 Pinia
        进行状态管理，主要包含用户状态(user)和交互状态(interaction)。
      </p>
      <p>
        3. <strong>路由管理</strong>：使用 Vue Router
        管理页面路由，包含首页、遗产名录、特色遗产详情、保护工作、展示与传承、关于我们等页面。
      </p>
      <p>
        4. <strong>后端服务</strong>：使用 Node.js + Express 构建 RESTful API，连接 MySQL 数据库。
      </p>
      <p>
        5.
        <strong>数据库结构</strong
        >：包含用户表(users)、评论表(comments)、点赞表(likes)和分享表(shares)。
      </p>
      <p>
        6.
        <strong>交互功能</strong
        >：实现点赞、评论、分享等社交互动功能，未登录用户可浏览内容，登录用户可进行交互。
      </p>
      <p>
        7. <strong>响应式设计</strong>：适配不同屏幕尺寸，确保在桌面和移动设备上都有良好的用户体验。
      </p>
    </div>
  </body>
</html>
